/*
 * @Author: Wilbur
 * @Date: 2019-06-27 09:21:21
 * @Last Modified by: Wilbur
 * @兼职列表
 * @Last Modified time: 2019-07-22 15:38:40
 */

<template>
    <div class="container part-time-container">
        <div class="content-wrapper">
            <el-row
                class="search-wrapper"
                :gutter="20"
            >
                <el-form
                    label-position="left"
                    label-width="84px"
                    @submit.native.prevent
                    size="small"
                >
                    <el-col
                        class="filter-item"
                        :span="6"
                    >
                        <el-form-item label="状态">
                            <el-select
                                v-model="filterData.status"
                                @change="getTableData(1)"
                                placeholder="请选择"
                            >
                                <el-option
                                    v-for="item in statusList"
                                    :key="item.id"
                                    :label="item.value"
                                    :value="item.id"
                                />
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col
                        class="filter-item"
                        :span="6"
                    >
                        <el-form-item label="企业名称：">
                            <el-input
                                v-model="filterData.keyword"
                                placeholder="请输入企业名称"
                                type="text"
                                size="small"
                                style="width: 250px;"
                                suffix-icon="el-icon-search"
                                clearable
                                @change="getTableData(1)"
                                @keyup.native.enter="getTableData(1)"
                            />
                        </el-form-item>
                    </el-col>
                </el-form>
            </el-row>
            <div class="table-wrapper">
                <el-table
                    :data="tableData"
                    height="100%"
                    style="width: 100%;"
                    @sort-change="handleSortChanged"
                >
                    <el-table-column
                        fixed="left"
                        header-align="left"
                        align="center"
                        :width="50"
                        label="序号"
                    >
                        <template slot-scope="scope">
                            <div class="table-index">
                                {{ scope.$index + 1 }}
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        fixed="left"
                        prop="hire_company_name"
                        :min-width="150"
                        show-overflow-tooltip
                        label="公司名称"
                    />
                    <el-table-column
                        fixed="left"
                        prop="title"
                        :min-width="150"
                        show-overflow-tooltip
                        label="招聘标题"
                    />
                    <el-table-column
                        prop="create_time"
                        min-width="160"
                        label="发布时间"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.create_time*1000 | dateFormatter('yyyy/MM/dd HH:mm') }}
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="read_count"
                        label="浏览量"
                    />
                    <el-table-column
                        prop="sort"
                        label="排序号"
                        sortable='custom'
                    >
                        <template slot-scope="scope">
                            <div class="sort-wrap">
                                {{ scope.row.sort }}
                                <span class="sort-spliter" />
                                <el-button
                                    type="text"
                                    class="btn-sort"
                                    @click="fnEditSort(scope.row)"
                                >
                                    <i class="el-icon-edit" />
                                </el-button>
                            </div>
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="all_count"
                        :min-width="90"
                        show-overflow-tooltip
                        label="报名/总额"
                    >
                        <template slot-scope="scope">
                            {{ scope.row.accept_count }}/{{ scope.row.all_count }}
                        </template>
                    </el-table-column>
                    <el-table-column
                        :formatter="emptyFormatter"
                        prop="parttime_address"
                        show-overflow-tooltip
                        label="招聘地区"
                    />
                    <el-table-column
                        prop="verify"
                        min-width="80"
                        label="状态"
                        :formatter="filterStatusType"
                    />
                    <el-table-column
                        prop="type"
                        min-width="80"
                        label="预览"
                    >
                        <template slot-scope="scope">
                            <el-popover
                                placement="bottom"
                                title="扫描下方二维码"
                                width="200"
                                popper-class="preview-qr"
                                trigger="click"
                            >
                                <div class="preview-qr-wrap">
                                    <img
                                        :src="fnSetQrLink(scope.row.parttime_no)"
                                        alt=""
                                    >
                                </div>
                                <el-button
                                    slot="reference"
                                    type="text"
                                >预览</el-button>
                            </el-popover>
                        </template>
                    </el-table-column>

                    <el-table-column
                        prop="date"
                        label="操作"
                        fixed="right"
                        :width="260"
                    >
                        <template slot-scope="scope">
                            <div>
                                <div>
                                    <el-button
                                        type="text"
                                        @click="fnGoManage(scope.row.hire_no)"
                                    >进入后台</el-button>
                                    <template v-if="scope.row.status != -99">
                                        <el-button
                                            type="text"
                                            :disabled="scope.row.accept_count <= 0"
                                            @click="handleRoute(scope.row)"
                                        >查看报名</el-button>
                                        <br>
                                        <el-button
                                            type="text"
                                            style="margin-left: 0;"
                                            @click="fnPass(scope.row.parttime_no)"
                                        >通过</el-button>
                                        <el-button
                                            type="text"
                                            class="btn-delete"
                                            @click="fnReject(scope.row.parttime_no)"
                                        >不通过</el-button>
                                        <el-button
                                            type="text"
                                            v-if="scope.row.status == 1"
                                            :disabled="scope.row.verify !== 3"
                                            @click="fnChangeStatus(scope.row.parttime_no, 0)"
                                        >下架</el-button>
                                        <el-button
                                            type="text"
                                            v-else
                                            :disabled="scope.row.verify !== 3"
                                            @click="fnChangeStatus(scope.row.parttime_no, 1)"
                                        >上架</el-button>
                                        <el-button
                                            type="text"
                                            v-if="scope.row.status === 1 && scope.row.verify === 3"
                                            @click="fnRecommend(scope.row)"
                                        >推荐到首页</el-button>
                                    </template>
                                </div>
                            </div>
                        </template>
                    </el-table-column>
                </el-table>
            </div>
            <div class="pagination-wrapper clearfix">
                <el-pagination
                    background
                    layout="total, prev, pager, next"
                    :total="page.total_count"
                    :page-size="page.page_size"
                    @current-change="getTableData"
                />
            </div>
        </div>
    </div>
</template>

<script>

export default {
    data() {
        return {
            authResult: {},
            taskTitleList: [],
            tableData: [],
            filterData: {
                status: '',
                keyword: ''
            },
            page: {
                now_page: 1,
                total_count: 0,
                page_size: 0
            },
            sortData: {
                sort_field: 0,
                sort_type: ''
            },
            baseUrl: '',
            mobileUrl: '',
            escape: escape,
            sessionTicket: localStorage.getItem('sessionTicket'),
            statusList: [{
                id: '',
                value: '全部'
            }, {
                id: 1,
                value: '已上架'
            }, {
                id: 2,
                value: '已下架'
            }, {
                id: 3,
                value: '待审核'
            }, {
                id: 6,
                value: '已删除'
            }, {
                id: 5,
                value: '审核未通过'
            }]
        };
    },
    computed: {

    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.getNowpage();
        this.baseUrl = this.$baseUrl;
        this.mobileUrl = location.host == 'phaadmin.wxhand.com' ? 'http://class.zsdx.cn' : 'http://task.wxhand.com';
        this.$store.commit('SET_HEADER', [
            {
                title: "校园代理",
            },
            {
                title: '工作'
            },
            {
                title: "兼职列表"
            }
        ]);
        this.filterData.status = this.$route.query.status ? this.$route.query.status : '';
        this.filterData.keyword = this.$route.query.keyword ? this.$route.query.keyword : '';
        this.getTableData();
    },
    mounted() {
    },
    methods: {
        /**
         * 记录当前页码
         */
        getNowpage () {
            let query = this.$route.query;

            if (query.page !== undefined) {
                this.page.now_page = Number(query.page);
            }
        },
        fnSetQrLink(no) {
            let base = this.$baseUrl;
            let ticket = localStorage.getItem('sessionTicket');
            let url = `${this.$studentBaseUrl}/pages/work/parttime-detail?parttime_no=`;
            // let url = location.host == 'phaadmin.wxhand.com' ? 'http://student.zsdx.cn/pages/work/parttime-detail?parttime_no=' : 'http://student.zsdx.cn/pages/work/parttime-detail?parttime_no=';

            url += no;

            return `${base}/__local/common%5Cqrcode?content=${url}&__ticket=${ticket}`;
        },
        fnGoManage(hire_no) {
            this.$post('/wei4/hire_user%5Cget_login_session_ticket', {
                hire_no: hire_no
            }, resp => {
                if (resp.code == 1) {
                    window.open(`${this.$shopBaseUrl}/resource?session_ticket=${resp.data.session_ticket}`);
                    // if (window.location.host == 'phaadmin.wxhand.com') {
                    //     window.open('http://cms.zsdx.cn/resource?session_ticket=' + resp.data.session_ticket);
                    // } else {
                    //     window.open('http://gt.wxhand.com/resource?session_ticket=' + resp.data.session_ticket);
                    // }
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg,
                        center: true
                    });
                }
            });
        },
        filterWorkType(type) {
            let result = '';

            if (type == 1) {
                result = '线上';
            } else if (type == 2) {
                result = '线下';
            } else {
                result = '--';
            }
            return result;
        },
        filterStatusType(row, column, val) {
            let result = '';

            if (val == 0) {
                if (row.status == -99) {
                    result = '已删除';
                } else {
                    result = '未提交';
                }
            } else if (val == 1) {
                if (row.status == -99) {
                    result = '已删除';
                } else {
                    result = '待审核';
                }
            } else if (val == 2) {
                if (row.status == -99) {
                    result = '已删除';
                } else {
                    result = '未通过';
                }
            } else if (val == 3) {
                if (row.status == 1) {
                    result = '已上架';
                } else if (row.status == -99) {
                    result = '已删除';
                } else {
                    result = '已下架';
                }
            } else {
                result = '未知';
            }
            return result;
        },
        filterFileType(type) {
            let result = '';

            if (type == 'audio') {
                result = '音频';
            } else if (type == 'doc') {
                result = '文档';
            } else if (type == 'file') {
                result = '文件';
            } else {
                result = '未知';
            }
            return result;
        },
        /**
       * 获取任务名称列表
       */
        getTasks() {
            this.$post('/student/task%5Csuggest', {
                query: ''
            }, resp => {
                if (resp.code == 1) {
                    this.taskTitleList = resp.data.list;
                }
            });
        },
        /**
       * 获取表格数据
       */
        getTableData(page) {
            this.$post('/student/parttime%5Cget_list', {
                type: 2,
                page_id: page || this.page.now_page,
                keyword: this.filterData.keyword,
                status: this.filterData.status,
                sort_field: this.sortData.sort_field,
                sort_type: this.sortData.sort_type
            }, resp => {
                if (resp.code == 1) {
                    this.tableData = resp.data.list;
                    this.page.now_page = resp.data.page.now_page;
                    this.page.total_count = resp.data.page.total_count;
                    this.page.page_size = resp.data.page.page_size;
                }
            });
        },

        /**
       * 跳转页面
       */
        handleRoute(row) {
            this.$router.replace({
                name: 'ParticipantsList',
                query: {
                    parttime_no: row.parttime_no,
                    page: this.page.now_page
                }
            });
        },
        fnSetPartTimeStatus(parttime_no, verify, verify_fail_reason) {
            this.$post('/student/parttime%5Cverify', {
                parttime_no: parttime_no,
                verify: verify,
                verify_fail_reason: verify_fail_reason
            }, resp => {
                if (resp.code == 1) {
                    this.getTableData();
                    this.$message({
                        type: 'success',
                        message: '操作成功'
                    });
                } else {
                    this.$message({
                        type: 'warning',
                        message: resp.msg || '删除失败'
                    });
                }
            });
        },
        fnPass(no) {
            this.$confirm('此操作将通过兼职审核, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.fnSetPartTimeStatus(no, 3, '');
            }).catch((e) => {
                console.log(e);
            });
        },
        /**
       * 驳回申请
       */
        fnReject(no) {

            this.$prompt('请输入不通过理由', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /\S/,
                inputPlaceholder: '请输入理由',
                inputErrorMessage: '请输入不通过理由'
            }).then(({ value }) => {
                this.fnSetPartTimeStatus(no, 2, value);
                this.$message({
                    type: 'success',
                    message: '操作成功'
                });
            }).catch(() => {
            });
        },
        fnChangeStatus(no, status) {
            this.$confirm('此操作将' + (status == 0 ? '下架' : '上架') + '兼职, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/parttime%5Cset_status', {
                    parttime_no: no,
                    status: status
                }, resp => {
                    if (resp.code == 1) {
                        this.getTableData();
                        this.$message({
                            type: 'success',
                            message: '操作成功'
                        });
                    } else {
                        this.$message({
                            type: 'warning',
                            message: resp.msg || '操作失败'
                        });
                    }
                });
            }).catch((e) => {
                console.log(e);
            });
        },
        /**
       * 列表渲染辅助函数：列表项为空处理
       */
        emptyFormatter(row, column, val) {
            if (!val) {
                return '--';
            }
            return val;
        },

        /**
       * 列表渲染辅助函数：列表项为是否
       */
        BooleanFormatter(row, column, val) {
            if (val == 1) {
                return '是';
            } else if (val == 0) {
                return '否';
            }

            return val;
        },

        /**
         * 推荐到首页 type 1:实习  2:兼职
         */
        fnRecommend (no) {
            console.log(no);
            this.$confirm('确认后推送该项目至【首页推荐】页面', '提示', {
                confirmButtonText: '确认',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/student/work_recommend%5Cadd', {
                    type: 2,
                    aim_no: no.parttime_no
                }, resp => {
                    if (resp.code == 1) {
                        this.$message({
                            type: 'success',
                            message: '推荐成功',
                            center: true
                        });
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'warning',
                            message: resp.msg,
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },

        /**
         *  修改排序号
         */
        fnEditSort (row) {
            this.$prompt('修改排序', '', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                inputPattern: /^(0|\+?[1-9][0-9]*)$/,
                inputPlaceholder: '请输入序号',
                inputErrorMessage: '请输入正整数',
                closeOnClickModal: false,
            }).then(({ value }) => {
                this.$post('/student/parttime%5Cset_sort', {
                    parttime_no: row.parttime_no,
                    sort: value
                }, resp => {
                    if (resp.code == 1) {
                        this.$set(row, 'sort', value);
                        this.$message({
                            type: 'success',
                            message: '操作成功',
                            center: true
                        });
                    } else if (resp.code == 0) {
                        this.$message({
                            type: 'info',
                            message: '操作失败',
                            center: true
                        });
                    }
                });
            }).catch(() => {
            });
        },

        /**
         * 排序
         */
        handleSortChanged (no) {
            if (no.order == 'descending') {
                this.sortData.sort_field = 1;
                this.sortData.sort_type = 1;
            } else if (no.order == 'ascending') {
                this.sortData.sort_field = 1;
                this.sortData.sort_type = 0;
            } else {
                return ;
            }
            this.getTableData();
        }
    }
};
</script>

<style lang="less" scoped>
  .container {
    display: flex;
    flex-direction: column;
    width: 100%;
  }
  .operation-wrapper {
    display: flex;
    flex-direction: row-reverse;
    padding: 12px 23px;
    background-color: #fff;

    .el-button {
      margin-left: 10px;
    }
  }
  .content-wrapper {
    flex: 1;
    display: flex;
    flex-direction: column;
    margin: 15px;
    overflow: hidden;
  }
  .preview-qr-wrap {
    width: 120px;
    height: 120px;
    text-align: center;
    margin: 0 auto;
    img {
      width: 100%;
      height: 100%;
    }
  }
  .search-wrapper {
    padding: 15px;
    background-color: #fff;
  }
  .filter-item {
    .el-form-item {
      margin-bottom: 0;
      white-space: nowrap;
    }
    .el-input {
      width: auto;
      vertical-align: middle;
    }
    .el-button {
      margin-left: 15px;
      vertical-align: middle;
    }
  }
  .table-wrapper {
    flex: 1;
    background-color: #fff;

    .el-button {
      padding: 0;
    }
    .icon-bianji {
      font-size: 14px;
      color: #b9b9b9;
      cursor: pointer;
    }
    .btn-delete {
      color: #fd4d32;
      &.is-disabled {
        color: #c0c4cc;
        cursor: not-allowed;
      }
    }
  }
  .pagination-wrapper {
    padding-top: 10px;
    .el-pagination {
      float: right;
      padding: 0;
      background-color: transparent;
    }
  }
    .sort-wrap {
        display: flex;
        align-items: center;
        cursor: pointer;
        .sort-spliter {
            width: 1px;
            height: 12px;
            background: rgba(235, 235, 235, 1);
            margin: 0 10px;
            }
            .btn-sort {
            font-size: 14px;
            line-height: 1;
            color: #ccc;
            &:hover {
                color: #20a0ff;
            }
        }
    }
</style>
<style lang="less">
  .part-time-container {
    tbody {
      .cell {
        display: flex;
        align-items: center;
        height: 48px;
      }
    }
  }
  .preview-qr {
    text-align: center;
  }
</style>
